<template>
	<view :id="id" class="w100" :scene="scene" :change:scene="Viewer.loadScene"></view>
</template>

<script>
  import uuid from './uuid.js'
  export default {
    props:{
      scene:{
        type: Object
      },
    },
    data(){
      return {
        id: uuid(10)
      }
    },
    methods:{
      /**
       * 场景点击事件
       * @param {Object} e
       */
      sceneClick(e){
        this.$emit('sceneClick',e);
      }
    }
  }
</script>

<script module="Viewer" lang="renderjs">
  import { Viewer } from 'photo-sphere-viewer';
  import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers';
	export default {
    mounted(){
      this.init()
    },
    methods:{
      loadScene(newValue, oldValue, ownerInstance, instance){
        if(this.viewer) this.viewer?.destroy()
        this.init()
      },
      init(){
        this.viewer = new Viewer({
          container: this.id,
          panorama: this.scene.panorama,
          description: this.scene?.description??'',
          minFov: this.scene?.minFov??30,
          maxFov: this.scene?.maxFov??90,
          autorotateDelay: this.scene?.autorotateDelay??true,
          autorotateSpeed: this.scene?.autorotateSpeed??0.12,
          defaultZoomLvl: this.scene?.defaultZoomLvl??0,
          fisheye: this.scene?.fisheye??true,
          navbar: this.scene?.navbar??false,
          defaultLong: this.scene?.defaultLong??0,
          defaultLat: this.scene?.defaultLat??0,
          lang:{
            autorotate: 'Automatic rotation',
            zoom: 'Zoom',
            zoomOut: 'Zoom out',
            zoomIn: 'Zoom in',
            move: 'Move',
            download: 'Download',
            fullscreen: 'Fullscreen',
            menu: 'Menu',
            twoFingers: 'Use two fingers to navigate',
            ctrlZoom: 'Use ctrl + scroll to zoom the image',
            loadError: 'The panorama can\'t be loaded',
            ...this.scene?.lang
          },
          loadingImg: this.scene?.loadingImg,
          loadingTxt: this.scene?.loadingTxt??'Loading...',
          mousewheel: this.scene?.mousewheel??true,
          mousemove: this.scene?.mousemove??true,
          sphereCorrection: {
            pan: 0,
            tilt: 0, 
            roll: 0,
            ...this.scene?.sphereCorrection
          },
          
          plugins: [
            [MarkersPlugin, {
              markers: this.scene.markers
            }], 
          ],
        });
        
        const mp = this.viewer.getPlugin(MarkersPlugin);
        
        // marker 标记点击触发
        mp.on('select-marker', (e, marker) => {
          this.$ownerInstance.callMethod('sceneClick',{name:'markerClick',detail:marker.config}) 
        });
        
        // 场景点击触发
        this.viewer.on('click',()=>{
          this.$ownerInstance.callMethod('sceneClick',{name:'sceneClick',detail:{}}) 
        })
      },
      
    }
	}
</script>
